import { Select, Form, Row, Col, DatePicker, Input, Switch, Button, Flex } from 'antd'
import '../styles/ReportContent.scss'
import { useEffect, useState } from 'react'
const ReportContent = ({ 
    formOptions,
    initialValues,
    setForm,
    type,
    getNewReport,
  }) => {
  const [form] = Form.useForm()
  const [isShowChaft, setIsShowChaft] = useState(true)

  const handleReset = () => {
    form.setFieldsValue(initialValues)
    setForm(initialValues)
  }

  useEffect(() => {
    handleReset()
  }, [initialValues])

  const { projectList } = formOptions
  return (
    <div className="report-content">
      <Form
        form={form}
        onValuesChange={(_, values) => {
          setForm(form => {
            return { ...form, ...values }
          });
        }}
      >
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Form.Item label="项目名称" name="project_id">
              <Select disabled options={(projectList || []).map(item => ({ label: item.value, value: item.id }))} />
            </Form.Item>
          </Col>
          {
            type === 'daily' ? (
              <Col span={6}>
                <Form.Item label="工作日期" name="reportTime">
                  <DatePicker disabled placeholder="" />
                </Form.Item>
              </Col>
            ) : ''
          }
          {
            type === 'month' ? (
              <Col span={6}>
                <Form.Item label="月度周期" name="reportTime">
                  <DatePicker disabled picker="month" />
                </Form.Item>
              </Col>
            ) : ''
          }
          <Col span={12}>
            <Form.Item label="">
              <Flex gap="small" align="center" justify='flex-end'>
                <Switch onChange={() => setIsShowChaft(!isShowChaft)} value={isShowChaft} checkedChildren="启用草稿" unCheckedChildren="关闭草稿" />
                <Button type="primary" size="small" onClick={handleReset}>重置</Button>
                <Button type="primary" size="small" onClick={getNewReport}>重新生成</Button>
              </Flex>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Form.Item label="日报内容" name="content">
              <Input.TextArea rows={25} />
            </Form.Item>
          </Col>
          {
            isShowChaft && (
              <Col span={12}>
                <Form.Item label="草稿">
                  <Input.TextArea rows={25} />
                </Form.Item>
              </Col>
            )
          }
        </Row>
      </Form>
    </div>
  )
}

export default ReportContent
